<template>
	<!-- 提现申请 -->
  <view class="container">
    <view class="content">
      <view class="withdraw-card">
        <view class="withdraw-row">
          <text>提现至</text>
          <text class="action">微信 &gt;</text>
        </view>
        <view class="withdraw-row">
          <text>提现金额</text>
        </view>
        <view class="amount-input-wrapper">
          <text class="currency-symbol">¥</text>
          <input class="amount-input" type="number" v-model="amount" />
		  
        </view>
        <view class="max-amount">
          <text>最多可提现金额：¥5000</text>
          <text class="all-withdraw" @click="withdrawAll">全部提现</text>
        </view>
		<view class="confirm-button" style="display: flex;justify-content: center;align-items: center;" @click="confirmWithdraw">确定</view>
       
      </view>
    </view>

    <view class="tips">
      <text class="tips-title">🌞 小贴士：</text>
      <view class="tips-content">
        <text>1、单笔订单提现金额需大于1元；</text>
        <text>2、提现申请后预计将在3-7个工作日内将款项发放至您提供的账号中；</text>
        <text>3、在法律法规允许范围内对本次规则进行解释并做出适当修改，如有疑问，请与商家联系；</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: ''
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    withdrawAll() {
      this.amount = 5000
    },
    confirmWithdraw() {
      if (this.amount > 0 && this.amount <= 5000) {
        uni.showToast({
          title: '提现成功',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '请输入合法的提现金额',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 750rpx;
  margin: auto;
  background-color: #ffffff;
}

.content {
  padding: 40rpx;
}

.withdraw-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  padding: 40rpx;
}

.withdraw-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  font-size: 32rpx;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.currency-symbol {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.amount-input {
  // border: none;
  border-bottom: 2rpx solid #ddd;
  // padding: 10rpx;
  font-size: 48rpx;
  height: 80rpx;
  // flex: 1;
  // outline: none;
}

.max-amount {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  color: #888;
}

.all-withdraw {
  color: #007bff;
  cursor: pointer;
}

.confirm-button {
  width: 100%;
  padding: 20rpx;
  border: none;
  border-radius: 16rpx;
  background-color: #bde77b;
  color: #ffffff;
  font-size: 36rpx;
  cursor: pointer;
}

.tips {
  padding: 40rpx;
  font-size: 28rpx;
  color: #888;
}

.tips-title {
  font-weight: bold;
  margin-bottom: 20rpx;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

</style>